class RenderPHB extends Render {
  constructor(dataPHB) {
    super()
    this.dataPHB = dataPHB
    this.getData()
    upTop(this)
  }

  //获取数据
  getData() {
    let renderJS_this = this
    //获取点击的文字
    this.pText = $(`.tab-group-child`).eq(0).text()
    //小导航栏
    this.smallNavIndex = 0
    //记录当前滚动条是否为初始状态
    this.documentScroll = 1
    //当前导航栏index
    this.navIndex = 0
    //初始化页面的请求id：推荐榜
    this.dataNum = 534263
    //滚动条回0
    $(document).scrollTop(0)

    $(`.tab-group-child`).each(function () {
      $(this).removeClass(`active`)
    })
    $(`.tab-group-child`).eq(0).addClass(`active`)
    //初始化渲染
    $.ajax({
      type: "GET",
      url: "/data_phb",
      data: `columnId=${renderJS_this.dataNum}&pageNo=1`,
      success: function (response) {
        renderJS_this.firstRender(response, renderJS_this.pText, renderJS_this.navIndex)
        //回调函数
        renderJS_this.clickCallback(renderJS_this.pText, renderJS_this.navIndex, renderJS_this.smallNavIndex, renderJS_this.documentScroll)
      }
    });

    //遍历左边导航栏
    $(`.tab-group-child`).each(
      //获取左边导航栏index
      function (index) {
        //导航栏点击事件
        $(this).click(function () {
          //tab切换
          $(`.tab-group-child`).removeClass(`active`)
          $(this).addClass(`active`)

          //刷新时滚动条回顶
          $(document).scrollTop(0)
          //滚动条为初始
          renderJS_this.documentScroll = 1
          //获取当前是哪个导航栏
          renderJS_this.navIndex = index
          //当前导航栏文字
          renderJS_this.pText = $(this).text()
          renderJS_this.dataNum = renderJS_this.dataPHB[1][renderJS_this.navIndex][0]
          $.ajax({
            type: "GET",
            url: "/data_phb",
            data: `columnId=${renderJS_this.dataNum}&pageNo=1`,
            success: function (response) {
              //回调函数
              renderJS_this.firstRender(response, renderJS_this.pText, renderJS_this.navIndex)
              renderJS_this.clickCallback(renderJS_this.pText, renderJS_this.navIndex, renderJS_this.smallNavIndex, renderJS_this.documentScroll)
            }
          });
        })
      }
    )

    //监控滚动条
    $(document).scroll(throttle(function () {
      //滚动条距离底部40px时触发
      if ($(document).scrollTop() >= ($(document).height() - $(window).height()) - 40) {
        console.log(`aaa`);
        $.ajax({
          type: "GET",
          url: "/data_phb",
          data: `columnId=${renderJS_this.dataNum}&pageNo=${renderJS_this.documentScroll+1}`,
          success: function (response) {
            renderJS_this.documentScroll++
            console.log(renderJS_this.documentScroll);
            renderJS_this.firstRender(response, renderJS_this.pText, renderJS_this.navIndex, renderJS_this.documentScroll, renderJS_this.smallNavIndex)
            renderJS_this.clickCallback(renderJS_this.pText, renderJS_this.navIndex, renderJS_this.smallNavIndex, renderJS_this.documentScroll)
          }
        });
      }
    }, 1000))
    //刷新
    $(`.close`).click(function () {
      renderJS_this.getData()
    })
  }

  //回调点击渲染
  clickCallback(pText, navIndex, smallNavIndex, documentScroll) {
    let renderJS_this = this
    //遍历二级导航栏
    $(`.on-link`).each(function (index) {
      //监听二级导航栏事件
      $(this).click(function () {
        //滚动条回到0
        $(document).scrollTop(0)
        //告诉渲染函数这是第几个二级导航栏
        smallNavIndex = index
        //滚动条赋值1
        documentScroll = 1
        //获取常量num
        renderJS_this.dataNum = renderJS_this.dataPHB[1][navIndex][index]
        console.log(renderJS_this.dataNum);

        $.ajax({
          type: "GET",
          url: "/data_phb",
          data: `columnId=${renderJS_this.dataNum}&pageNo=1`,
          success: function (response) {
            //传入数据，榜名称，导航栏下标，滚动条位置，小导航下标
            renderJS_this.firstRender(response, pText, navIndex, documentScroll, smallNavIndex)
            //回调监听小导航栏
            renderJS_this.clickCallback(pText, navIndex, smallNavIndex, documentScroll)
          }
        });
      })
    })
  }

  firstRender(data, pText, navIndex, documentScroll, smallNavIndex = 0) {
    //渲染内容头
    let renderJS_this = this
    renderJS_this.renderHTML($(`.ypc-column-name`), pText)
    renderJS_this.renderHTML($(`.column-desc`), data.data.pushName)
    //渲染内容二级分类
    let render_t = ``

    //导航栏下标的常量，渲染小导航栏
    let obj = renderJS_this.dataPHB[0][navIndex]
    //循环渲染小导航栏
    for (let key in obj) {
      render_t += `
    <span data-v-6e0cd0e0="" class="ypc-link on-link">${obj[key]}</span>
    <i data-v-6e0cd0e0=""></i>
    `
    }
    renderJS_this.renderHTML($(`.rank-cycle`), render_t)
    //渲染内容
    let renderBook = ``
    //当不是第一次渲染时，右上角没图片，按照顺序走
    if (documentScroll > 1) {
      for (let i = 0; i < data.data.books.length; i++) {
        renderBook += `
            <div class="book-large rank-book" data-v-4ba8fd4c="" data-v-6e0cd0e0="" data-v-62c31e8d="" onclick="location.href='http://127.0.0.1:8080/QQLB/src/pages/QQread-book.html?bid=${data.data.books[i].bid}'">
            <div class="book" data-v-4ba8fd4c=""><img
            src="https://wfqqreader-1252317822.image.myqcloud.com/cover/${data.data.books[i].bid%1000}/${data.data.books[i].bid}/b_${data.data.books[i].bid}.jpg" class="ypc-book-cover"
                data-v-4ba8fd4c=""> <span class="no" data-v-4ba8fd4c="">${((documentScroll-1)*20)+i+1}</span>
              <!---->
            </div>
            <div class="content" data-v-4ba8fd4c="">
              <p class="title ypc-link" data-v-4ba8fd4c="">${data.data.books[i].title}</p>
              <p class="intro" data-v-4ba8fd4c="">${data.data.books[i].intro}
              </p>
              <p class="other" data-v-4ba8fd4c=""><span data-v-4ba8fd4c="">${data.data.books[i].author}</span> <span data-v-4ba8fd4c="">·古典</span> <span
                  data-v-4ba8fd4c="">·连载</span> <span data-v-4ba8fd4c="">·${parseInt(data.data.books[i].totalWords/10000)}万字</span></p>
            </div> <button class="ypc-btn ypc-btn-primary is-plain ypc-btn-normal" data-v-a9885818="" data-v-4ba8fd4c=""><span
                data-v-a9885818="">开始阅读</span></button>
          </div>
            `
      }
      //当第一次渲染时，右上角有图片
    } else {
      for (let i = 0; i < 3; i++) {
        renderBook +=
          `
      <div class="book-large rank-book" data-v-4ba8fd4c="" data-v-6e0cd0e0="" data-v-62c31e8d="" onclick="location.href='http://127.0.0.1:8080/QQLB/src/pages/QQread-book.html?bid=${data.data.books[i].bid}'">
      <div class="book" data-v-4ba8fd4c=""><img
          src="https://wfqqreader-1252317822.image.myqcloud.com/cover/${data.data.books[i].bid%1000}/${data.data.books[i].bid}/b_${data.data.books[i].bid}.jpg" class="ypc-book-cover"
          data-v-4ba8fd4c=""> <img src="../static/rank${i+1}.png" alt="rank"
          class="icon" data-v-4ba8fd4c="">
        <!---->
      </div>
      <div class="content" data-v-4ba8fd4c="">
        <p class="title ypc-link" data-v-4ba8fd4c="">${data.data.books[i].title}</p>
        <p class="intro" data-v-4ba8fd4c="">${data.data.books[i].intro}
        </p>
        <p class="other" data-v-4ba8fd4c=""><span data-v-4ba8fd4c="">${data.data.books[i].author}</span> <span data-v-4ba8fd4c="">·${data.data.books[i].category3Name}</span>
          <span data-v-4ba8fd4c="">·连载</span> <span data-v-4ba8fd4c="">·${parseInt(data.data.books[i].totalWords/10000)}万字</span></p>
      </div> <button class="ypc-btn ypc-btn-primary is-plain ypc-btn-normal" data-v-a9885818="" data-v-4ba8fd4c=""><span
          data-v-a9885818="">开始阅读</span></button>
    </div>
      `
      }
      //第四条开始右上角没有图片
      for (let i = 3; i < data.data.books.length; i++) {
        renderBook += `
          <div class="book-large rank-book" data-v-4ba8fd4c="" data-v-6e0cd0e0="" data-v-62c31e8d="" onclick="location.href='http://127.0.0.1:8080/QQLB/src/pages/QQread-book.html?bid=${data.data.books[i].bid}'">
          <div class="book" data-v-4ba8fd4c=""><img
          src="https://wfqqreader-1252317822.image.myqcloud.com/cover/${data.data.books[i].bid%1000}/${data.data.books[i].bid}/b_${data.data.books[i].bid}.jpg" class="ypc-book-cover"
              data-v-4ba8fd4c=""> <span class="no" data-v-4ba8fd4c="">${i+1}</span>
            <!---->
          </div>
          <div class="content" data-v-4ba8fd4c="">
            <p class="title ypc-link" data-v-4ba8fd4c="">${data.data.books[i].title}</p>
            <p class="intro" data-v-4ba8fd4c="">${data.data.books[i].intro}
            </p>
            <p class="other" data-v-4ba8fd4c=""><span data-v-4ba8fd4c="">${data.data.books[i].author}</span> <span data-v-4ba8fd4c="">·古典</span> <span
                data-v-4ba8fd4c="">·连载</span> <span data-v-4ba8fd4c="">·${parseInt(data.data.books[i].totalWords/10000)}万字</span></p>
          </div> <button class="ypc-btn ypc-btn-primary is-plain ypc-btn-normal" data-v-a9885818="" data-v-4ba8fd4c=""><span
              data-v-a9885818="">开始阅读</span></button>
        </div>
          `
      }
      renderBook += `<div data-v-62c31e8d="" class="bottom loading loadingIng">
    <img data-v-62c31e8d=""src="../static/icon-loading.a2da16d.svg" alt="loading" class="icon"> 
    <span data-v-62c31e8d=""class="txt">正在加载</span>
    </div> `
    }
    //不是第一次渲染时插入 在刷新动画前面插入
    if (documentScroll > 1) {
      renderJS_this.renderBefore($(`.loadingIng`), renderBook)
    } else {
      //第一次渲染，直接覆盖
      renderJS_this.renderHTML($(`.ypc-lists`), renderBook)
    }
    //当ajax数据少于20条则刷新动画改成静态 告知客户渲染完成
    if (data.data.books.length < 20) {
      $(`.loadingIng`).removeClass(`loading`).addClass(`finished`).text(`以显示全部`).children(`img`).remove()
    }
    $(`.on-link`).eq(smallNavIndex).addClass(`active`)
  }
}